<template>
  <div class="CandidateApplication">
    <div class="titleTop first">
      <h3>{{`${$t('navigation.candidate_application')}`}}</h3>
      <!-- <a-button type="primary" ghost>新增简历</a-button> -->
    </div>
    <div class="content">
      <!-- <p class="tag">*改变投递候选人状态（如点击合适、待定等按钮）后，页面可能延迟几分钟才能展示改变后状态</p> -->
      <CountCard :dataList="menus" @search="setSearch" :status="operator" />
      <CandidateTable :dataList="menus" @getCard="getCard"/>
    </div>
  </div>
</template>

<script>
// import { mapMutations, mapState } from 'vuex'
// import CountCard from '@/components/CountCard/CountCard'mapState,
import CountCard from '@/components/CountCard/CountCard'
import { countByStatus } from '@/api/resume'
import CandidateTable from '@/components/resume/CandidateTable'
export default {
  name: 'CandidateApplication',
  components: { CandidateTable, CountCard },
  data () {
    return {
      menus: null,
      operator: 'Delivered'
    }
  },
  created () {
    this.getCard()
    if (this.$route.query.operator) {
      this.operator = this.$route.query.operator
    }
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        if (val.query.operator !== oldVal.query.operator) {
          if (!val.query.operator) {
            this.operator = 'Delivered'
          } else {
            this.operator = val.query.operator
          }
        }
      }
    }
  },
  methods: {
    async getCard () {
      let res = await countByStatus()
      if (res.code === 200) {
        this.menus = res.data
        this.operator = res.data[0] ? res.data[0].key : 'ALL'
      } else {
        this.$message.error(res.message)
      }
    },
    setSearch (item) {
      this.$router.push({ query: { operator: item.key } })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.CandidateApplication
  .tag
    color errorColor
    text-align right
    margin-bottom 8px
  .titleTop
    background #fff
    display flex
    align-items center
    justify-content flex-start
    padding  0 24px 12px
    h3
      margin-right 24px
      font-size 18px
      font-weight bold
    button
      margin-left 12px
  .content
    padding 12px 24px
  :global(.CandidateTable)
    margin-top 12px
</style>
